<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <!-- Standard Meta -->
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

    <!-- Site Properties -->
    <title>Any Video | Github | 个人定制资源库</title>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <link href="https://cdn.bootcss.com/semantic-ui/2.2.10/semantic.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/semantic-ui/2.2.10/semantic.min.js"></script>
    <link href="https://cdn.bootcss.com/mediaelement/4.1.3/mediaelementplayer.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/mediaelement/4.1.3/mediaelementplayer.js"></script>
    <script src="https://cdn.bootcss.com/mediaelement/4.1.2/renderers/twitch.js"></script>
    <script src="https://cdn.bootcss.com/mediaelement/4.1.2/renderers/vimeo.js"></script>
    <link href="/css/style.css" rel="stylesheet">
    <script src="/js/siderbar.js"></script>
</head>

<body>
<div th:replace="~{header :: fmenu}"></div>

<div th:replace="~{header :: smenu}"></div>

<div class="pusher">

    <div th:replace="~{header :: pmenu}"></div>

    <div class="nav-divider"></div>

    <div class="ui container">

        <div class="ui stackable grid">
            <div class="twelve wide column">

                <div class="row relative">
                    <h3 class="ui dividing header red" id="videoTitle">
                        <i class="video play outline icon"></i>
                        [[${source.title}]]
                    </h3>
                    <button th:class="${#httpServletRequest.remoteUser} ? 'negative ui mini red button right-absolute refresh' : 'negative ui disabled mini red button right-absolute refresh'"
                            id="collectBtn">收藏</button>
                </div>

                <div class="hidden" id="videoImage" th:data-value="${source.image}"></div>

                <div class="hidden" id="videoUrl" th:data-value="${source.value}"></div>

                <div class="hidden" id="videoType" th:data-value="${source.type}"></div>

                <div class="hidden" id="videoOther" th:data-value="${source.other}"></div>

                <div class="player margin-top">
                    <video id="mediaplayer" width="100%" height="100%" preload="none" style="max-width: 100%" controls
                           autoplay>
                        <source th:src="${source.playUrl}"/>
                    </video>
                </div>

                <div class="ui teal progress" id="vProgress" th:if="${source.type} == 'qq'">
                    <div class="bar">
                        <div class="progress"></div>
                    </div>
                </div>

            </div>

            <div class="four wide column ">

                <h3 class="ui dividing header red">
                    <i class="cube icon"></i>
                    选集播放
                </h3>

                <div class="ui active centered inline loader" id="listLoader"></div>

                <div class="ui center aligned segment spaced" id="playList">

                </div>

                <h3 class="ui dividing header red">
                    <i class="asterisk icon"></i>
                    特别提醒
                </h3>

                <div class="ui segment">
                    <a class="ui red right ribbon label">仅支持HTML5</a>
                    <p>无法播放请使用：</p>
                    <p>Edge(Win) | Safari(Mac) | 手机浏览器</p>
                </div>

            </div>
        </div>

        <div class="ui hidden divider"></div>

        <!-- 收藏 -->
        <div class="ui first coupled modal">
            <div class="header">
                选择仓库
            </div>
            <div class="image content">
                <div class="ui fluid selection dropdown">
                    <i class="dropdown icon"></i>
                    <span class="default text" id="defaultItem">选择仓库</span>
                    <div class="menu" id="itemMenu">
                    </div>
                </div>
            </div>
            <div class="actions">
                <a class="ui button red" href="/user" id="createHubBtn">新建仓库</a>
                <div class="ui green button" id="collectOkBtn">确定</div>
            </div>
        </div>

        <div class="ui small second coupled modal">
            <div class="header">
                Notice
            </div>
            <div class="content">
                <div class="description">
                    <p id="description">收藏成功!</p>
                </div>
            </div>
            <div class="actions">
                <div class="ui approve button">
                    <i class="checkmark icon"></i> 关闭
                </div>
            </div>
        </div>

    </div>
    <script>
        /** 初始化组件 */
        $('.coupled.modal').modal({
            allowMultiple: false
        });

        // attach events to buttons
        $('.second.modal').modal('attach events', '.first.modal .button');

        $('.ui.dropdown').dropdown();
    </script>


</div>

<script>

    /** 获取当前电视剧的分集信息 **/
    $(document).ready(function () {
        var regx = /u=(.*)/;
        var src = regx.exec(window.location.href)[1];
        var api = "/api/episode";
        $.get(api, {
            "v": src
        }, function (data) {
            $("#listLoader").attr("class", "");
            if (data.length > 0) {
                for (var i = 0; i < data.length; i++) {
                    var episode = $("<button class='ui mini basic red button bottom-space play-episode'></button>")
                    episode.text(data[i].index);
                    episode.attr("value", data[i].value);
                    $("#playList").append(episode);
                }
                $(".play-episode").click(function () {
                    var self = $(this);
                    self.attr("class", "bottom-space ui basic red loading button");
                    var playUrl = $(this).val();
                    playUrl = "/api/video?v=" + playUrl;
                    $.get(playUrl, function (data) {
                        $("#videoTitle").html("<i class='video play outline icon'></i>" + data.title);
                        $("#mediaplayer").attr("src", data.playUrl);
                        $("#videoUrl").attr("data-value", data.value);
                        $("#videoImage").attr("src", data.image);
                        self.attr("class", "bottom-space ui basic red button");
                        if (videoType === 'qq') {
                            init(data.playUrl);
                        }
                    })
                });
            }
        });
    });

    /** 收藏按钮事件 **/
    $("#collectBtn").click(function () {
        var api = "/user/hub/list";
        var itemMenu = $("#itemMenu");
        itemMenu.html("");
        $('.first.modal').modal('show');
        $.get(api, function (data) {
            var defaultItem = $("#defaultItem");
            if (data.length < 1) {
                defaultItem.text("请先创建仓库！");
                $("#collectOkBtn").attr("class", "ui disabled primary button");
            }
            for (var i = 0; i < data.length; i++) {
                var item = $("<div class='item' data-value='ad'></div>");
                var itemAvatar = $("<img class='ui image' />");
                itemAvatar.attr("data-value", data[i].id);
                itemAvatar.attr("src", data[i].avatar);
                item.append(itemAvatar);
                item.append(data[i].name);
                itemMenu.append(item);
            }
        })
    });

    /** 收藏确认按钮事件 **/
    $("#collectOkBtn").click(function () {
        var api = "/user/hub/item/insert";
        var defaultItem = $("#defaultItem");
        var hubId = defaultItem.find("img").eq(0).attr("data-value");
        var name = $("#videoTitle").text().trim();
        var image = $("#videoImage").attr("data-value");
        var value = $("#videoUrl").attr("data-value");
        $.post(api,
            {
                "hubId": hubId,
                "name": name,
                "image": image,
                "value": value,
                "type": "VIDEO"
            },
            function (data) {
                if (data.code === 200) {
                    $("#description").text("收藏成功！");
                } else {
                    $("#description").text("收藏失败！");
                }
            }
        );
    });

</script>

<!-- 处理腾讯视频  -->
<script>
    var partSize = $('#videoOther').attr('data-value');
    var videoType = $('#videoType').attr('data-value');
    var video = document.getElementById('mediaplayer');
    var baseUrl, baseFile, partList, currentPart;

    function init(url) {
        partList = new Array();
        partList[0] = url;
        currentPart = 0;
        url = url.replace(/\?.*/, '');
        var index = url.lastIndexOf('/');
        baseUrl = url.substring(0, index);
        baseFile = url.substring(index + 1, url.length);
        var percent = 1 / parseInt(partSize) * 100;

        progress(percent);

        for (var i = 0; i < parseInt(partSize - 1); i++) {
            var fileIndex = i + 2;
            var api = '/api/qq/' + baseFile + '/' + fileIndex;
            console.log("request:" + api);
            $.get(api, function (data) {
                var result = baseUrl + data.value;
                var partIndex = parseInt(data.index);
                console.log("data.index:", data.index);
                console.log('response: ' + result);
                partList[partIndex - 1] = result;
                console.log("size:" + partList.length);
            });
        }
    }

    function progress(percent) {
        $('#vProgress').progress({
            percent: percent
        });
    }

    $(document).ready(function () {
        if (videoType === 'qq') {
            init(video.currentSrc);
        }

        /**
         * 自动播放下一个片段
         */
        video.addEventListener('ended', function () {
            currentPart++;
            if (currentPart < partList.length) {
                console.log("currentPart: " + currentPart);
                video.src = partList[currentPart];
                video.load();
                video.play();
                var percent = (currentPart + 1) / parseInt(partSize) * 100;
                progress(percent);
            }
        });
    });

</script>

</body>

</html>